;(function(node) {
  var ToDoList = function() {
    var _self = this;
    this.node = node;
    this.isShow = false;
    this.isEdit = false;
    this.curIdx = null;
    this.dConfig = {
      'plusBtn': '',
      'inputWrap': '',
      'addBtn': '',
      'list': '',
      'itemClass': '',
    };
    this.config = JSON.parse(this.getConfig());
    // 检查配置项
    for (var key in this.dConfig) {
      if (!this.config.hasOwnProperty(key)) {
        console.log(errorInfo(key));
        return;
      }
    }
    this.setConfig();
    addEvent(this.plusBtn, 'click', function() {
      _self.handleClickPlus();
    });
    addEvent(this.addBtn, 'click', function() {
      _self.handleClickAdd();
    });
    addEvent(this.oList, 'click', function(e) {
      var e = e || window.event,
        tar = e.target || e.srcElement;
      _self.handleClickList(tar);
    });
  };
  
  ToDoList.prototype = {
    getConfig: function() {
      return this.node.getAttribute('data-config');
    },
    setConfig: function() {
      var config = this.config;
      this.plusBtn = this.node.getElementsByClassName(config.plusBtn)[0];
      this.inputWrap = this.node.getElementsByClassName(this.config.inputWrap)[0];
      this.addBtn = this.inputWrap.getElementsByClassName(config.addBtn)[0];
      this.oList = this.node.getElementsByClassName(config.list)[0];
      this.content = this.inputWrap.getElementsByClassName('content')[0];
      this.oItems = this.node.getElementsByClassName('item');
    },
    handleClickPlus: function() {
      if (this.isShow) {
        restoreStatus.call(this);
        restoreItemClass.call(this);
      } else {
        showInput.call(this, 'open');
        this.content.focus();
      }
    },
    handleClickAdd: function() {
      var content = this.content.value,
        contentLen = content.length,
        oItems = this.oItems,
        itemLen = oItems.length,
        text = '';
      if (contentLen <= 0) {
        return;
      }
      for (var i = 0; i < itemLen; i++) {
        text = elemChildren(oItems[i])[0].innerText;
        if (content === text) {
          alert('已存在该事项');
          return;
        }
      }
      if (this.isEdit) {
        elemChildren(oItems[this.curIdx])[0].innerText = content;
      } else {
        var oLi = document.createElement('li');
        oLi.className = 'item';
        oLi.innerHTML = itemTpl(content);
        this.oList.appendChild(oLi);
      }
      restoreStatus.call(this);
      restoreItemClass.call(this);
    },
    handleClickList: function(tar) {
      var oItems = this.oItems,
        oParent = elemParent(tar, 2);
      if (tar.className === 'edit-btn') {
        this.isEdit = true;
        this.curIdx = Array.prototype.indexOf.call(oItems, oParent);
        restoreItemClass.call(this);
        oParent.className += ' active';
        this.addBtn.innerText = `修改第${this.curIdx + 1}项`;
        showInput.call(this, 'open');
        this.content.focus();
      } else if (tar.className === 'remove-btn') {
        oParent.remove();
        restoreStatus.call(this);
      }
    },
  };
  
  function restoreItemClass() {
    var itemLen = this.oItems.length;
    for (var i = 0; i < itemLen; i++) {
      this.oItems[i].className = 'item';
    }
  }
  
  function restoreStatus() {
    showInput.call(this, 'close');
    this.content.value = '';
    this.isEdit = false;
    this.curIdx = null;
    this.addBtn.innerText = '新增事项';
  }
  
  function showInput(action) {
    if (action === 'close') {
      this.inputWrap.style.display = 'none';
      this.isShow = false;
    } else if (action === 'open') {
      this.inputWrap.style.display = 'block';
      this.isShow = true;
    }
  }
  
  function itemTpl(text) {
    return `
       <p class="item-content">${text}</p>
       <div class="btn-group">
         <a class="edit-btn" href="javascript:">编辑</a>
         <a class="remove-btn" href="javascript:">删除</a>
       </div>
    `;
  }
  
  function errorInfo(key) {
    return `配置项${key}没有填`;
  }
  
  new ToDoList();
  
}(document.getElementsByClassName('todo-wrap')[0]));
